<route lang="json5">
{
	style: {
		navigationBarTitleText: '7号助手',
		navigationStyle: 'custom',
	},
}
</route>
<template>
	<view class="page bg-white" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
		<text class="login-title">注册</text>

		<wd-form ref="form" class="form" :model="model">
			<wd-cell-group :border="true">
				<wd-input
					label="账号"
					label-width="170rpx"
					prop="username"
					clearable
					v-model="model.username"
					placeholder="请输入账号"
					:rules="[
						{
							required: true,
							message: '请输入账号',
						},
					]"
				/>

				<wd-input
					label="验证码"
					label-width="170rpx"
					prop="code"
					clearable
					v-model="model.code"
					placeholder="请输入验证码"
					use-suffix-slot
					:rules="[
						{
							required: true,
							message: '请输入验证码',
						},
					]"
				>
					<template #suffix>
						<wd-button type="text" v-if="countDown == 0" @click="getCode">获取验证码</wd-button>
						<wd-count-down ref="countDownRef" :time="countDown" v-else />
					</template>
				</wd-input>

				<wd-input
					label="密码"
					label-width="170rpx"
					prop="password"
					type="password"
					clearable
					v-model="model.password"
					placeholder="请输入密码"
					:rules="[
						{
							required: true,
							message: '请输入密码',
						},
					]"
				/>

				<wd-input
					label="邀请码"
					label-width="170rpx"
					prop="share"
					clearable
					v-model="model.share"
					placeholder="请输入邀请码"
					:rules="[
						{
							required: true,
							message: '请输入邀请码',
						},
					]"
				/>
			</wd-cell-group>

			<view class="footer">
				<wd-button type="primary" size="large" custom-class="login-btn" @click="handleSubmit" block>
					注册
				</wd-button>
			</view>

			<view class="register">
				<wd-button type="text" @click="toUrl('/pages/login/index')">登录</wd-button>
			</view>
		</wd-form>
	</view>
</template>
<script setup>
import { http } from '@/utils/http'

defineOptions({
	name: 'Register',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const form = ref(null)

const model = ref({
	username: '',
	password: '',
	code: '',
	share: '',
})

const countDown = ref(0)
const countDownRef = ref(null)

const toUrl = (url) => {
	uni.navigateTo({
		url,
	})
}

onLoad((option) => {
	if (option.invitationCode) {
		model.value.share = option.invitationCode
	}
})

const getCode = async () => {
	if (model.value.username) {
		let res = await http.get('/api/sms/send', { phone: model.value.username })
		if (res.code == 200) {
			countDown.value = 60000
			countDownRef.value.start()
		}
	} else {
		uni.showToast({
			title: '请输入账号',
			duration: 2000,
			icon: 'none',
		})
		return
	}
}

/**
 * 提交
 */
const handleSubmit = async () => {
	form.value
		.validate()
		.then(async ({ valid, errors }) => {
			if (valid) {
				let res = await http.get('/api/user/register', {
					userName: model.value.username,
					phone: model.value.username,
					password: model.value.password,
					share: model.value.share,
					code: model.value.code,
				})

				if (res.code == 200) {
					uni.showToast({
						title: res.message,
						duration: 2000,
						icon: 'none',
						complete: () => {
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/login/index',
								})
							}, 2000)
						},
					})
				}
			}
		})
		.catch((error) => {})
}
</script>
<style lang="scss" scoped>
:deep(.wd-cell-group) {
	background-color: transparent;
}

:deep(.wd-cell-group__body) {
	background-color: transparent;
}

:deep(.wd-input) {
	border-radius: 44rpx;
	margin-bottom: 20rpx;
}

.page {
	background-image: url('http://cdn.gtfy.net.cn/swiper/newMyBg.png');
	background-size: cover;
}

.login-title {
	width: 710rpx;
	line-height: 200rpx;
	text-align: left;
	font-size: 60rpx;
	font-weight: 800;
	color: #fff;
	text-shadow: 0 0 10rpx #333;
}

.form {
	width: 710rpx;
	min-height: 600rpx;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
}

.register {
	width: 100%;
	height: 88rpx;

	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

:deep(.register) {
	width: 100%;
	height: 88rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.footer {
	box-sizing: border-box;
	padding-top: 50rpx;

	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: flex-start;

	flex: 1;

	width: 100%;
	height: 100rpx;
}

.login-btn {
	width: 300rpx;
	background-image: url(http://cdn.gtfy.net.cn/swiper/newMyBg.png);
	background-color: transparent;
	background-size: cover;
	color: #5a88f1;
}

:deep(.footer) {
	box-sizing: border-box;
	padding-top: 50rpx;

	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: flex-start;

	flex: 1;

	width: 100%;
	height: 100rpx;
}

:deep(.login-btn) {
	width: 300rpx;
	background-image: url(http://cdn.gtfy.net.cn/swiper/newMyBg.png);
	background-color: transparent;
	background-size: cover;
	color: #5a88f1;
}

:deep(.form) {
	width: 710rpx;
	min-height: 600rpx;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;

	.register {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
}

.bottom-side-otherLogin {
	width: 100%;

	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: center;

	gap: 24rpx;
	/* #ifdef MP-WEIXIN */
	color: #4d80f0;
	/* #endif */

	/* #ifdef H5 */
	color: #fff;
	/* #endif */
	font-size: 24rpx;

	image {
		width: 50rpx;
		height: 50rpx;
	}
}
</style>
